<template>
    <div class="form-content">
        <div class="form">
            <div class="input-item">
                <input type="text" v-model="userName" placeholder="请输入用户名">
            </div>

            <div class="input-item">
                <input type="password" v-model="psd" placeholder="请输入密码">
            </div>

             <div class="input-item">
                <input type="password" v-model="psdConfirm" placeholder="请再输入密码">
            </div>

            <button :disabled = "regBtn" @click="register" class="pr-btn pr-btn-block" type="button">注册</button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        data() {
            return {
                userName : '',
                psd : '',
                psdConfirm : '',
                regBtn : false
            }
        },
        methods : {
            register() {
                 if(this.userName <= 0) {
                    Mint.Toast({
                        message: '请输入用户名',
                        duration: 1250
                    })
                    return false
                }

                if(this.psd <= 0) {
                    Mint.Toast({
                        message: '请输入密码',
                        duration: 1250
                    })
                    return false
                }

                if(this.psdConfirm <= 0) {
                    Mint.Toast({
                        message: '请再次输入密码',
                        duration: 1250
                    })
                    return false
                }
                var data = {
                    userName : this.userName,
                    psd : this.psd
                }
                this.regBtn = true;

                this.$http({
                    method : 'post',
                    url : 'http://localhost:3000/api/register',
                    params : data
                }).then((res) => {
                    Mint.Toast({
                        message: res.data.msg,
                        duration: 2000
                    })
                    if(res.data.status == 0) {
                        setTimeout(() => {
                            this.$rt.go(-1);
                        })
                    }
                    this.regBtn = false;
                }).catch(err => {
                    this.regBtn = false;
                })
            }
        }
    }
</script>